<template>
    <div class="page-help">
        <van-nav-bar class="help-tilte" left-arrow :fixed="true" :title="$t('m.Howtosetaprice')" @click-left="$router.back(-1)">
        </van-nav-bar>
        <div style="padding: 23px;"></div>
        <div class="terms">
            <div class="terms-list">
                <p >{{$t('m.Startwiththesesuggestions')}}</p>
            </div>
            <table border="1" class="table-box">
                <tr class="th-title">
                    <th>{{$t('m.Itemcondition')}}</th>
                    <th>{{$t('m.Suggestedprice')}}</th>
                </tr>
                <tr class="th-list">
                    <td>{{$t('m.NewUnused')}}</td>
                    <td>
                        <div>{{$t('m.Sixtoeight')}}</div>
                        <div>{{$t('m.oftheretailprice')}}</div>
                    </td>
                </tr>
                <tr class="th-list">
                    <td>{{$t('m.Slightlyused')}}</td>
                    <td>
                        <div>{{$t('m.Fourtosix')}}</div>
                        <div>{{$t('m.oftheretailprice')}}</div>
                    </td>
                </tr>
                <tr class="th-list">
                    <td>{{$t('m.Heavilyusedordamaged')}}</td>
                    <td>
                        <div>{{$t('m.Twotofour')}}</div>
                        <div>{{$t('m.oftheretailprice')}}</div>
                    </td>
                </tr>
            </table>
            <div class="terms-list">
                <div class="h3">{{dataJson.title}}</div>
                <div v-if="dataJson.child" class="list-box">
                    <p v-for="(i, index) in dataJson.child">{{i}}</p>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        name: 'HowSetPrice',
        data() {
            return {};
        },
        computed: {
            dataJson() {
                if (this.$store.state.store.localLang == 'MM') {
                    return {
                        "title" : "အသုံးဝင္ေသာ အခ်က္အလက္မ်ား",
                        "child" : [
                            "ေရာင္းခ်မည့္ ကုန္ပစၥည္းႏွင့္ အမ်ိဳးအစားတူေသာ က႑မ်ား(Catalogue) တြင္ အျခားေသာ ေရာင္းခ်သူမ်ား မည္ကဲ့သို႔ ေဈးသတ္မွတ္သည္ကို ရွာေဖြေလ့လာပါ။",
                            "ကုန္ပစၥည္း အျမန္ေရာင္းထြက္ေစရန္ ပုံမွန္ေဈးႏႈန္းထက္ အနည္းငယ္ ေလွ်ာ့၍ ေရာင္းပါ။",
                            "ပြဲေတာ္၊ရာသီ အခ်ိန္ကာလ ေတြကို သိရွိသင့္ပါသည္။ အဆိုပါ အခ်ိန္တြင္ ေဈးႏႈန္းခ်၍ ေရာင္းခ်ျခင္းသည္ ပုံမွန္အခ်ိန္တြင္ ေဈးႏႈန္းခ်၍ ေရာင္းခ်ျခင္းထက္ ပို၍ သင့္ေတာ္ပါသည္။",
                            "သင့္ ကုန္ပစၥည္း မေရာင္းထြက္ မခ်င္း ေဈးႏႈန္း ျပင္ဆင္ျခင္းကို ျပဳလုပ္ႏိုင္ပါသည္။ အကယ္၍ ကုန္ပစၥည္းက ႏွစ္ရက္ သုံးရက္ အထိ မေရာင္းရပါက ေဈးခ်၍ ေရာင္းျခင္းကို စဥ္းစားသင့္သည္။",
                        ]
                    }
                } else if (this.$store.state.store.localLang == 'MMU') {
                    return {
                        "title" : "အသုံးဝင်သော အချက်အလက်များ",
                        "child" : [
                            "ရောင်းချမည့် ကုန်ပစ္စည်းနှင့် အမျိုးအစားတူသော ကဏ္ဍများ(Catalogue) တွင် အခြားသော ရောင်းချသူများ မည်ကဲ့သို့ ဈေးသတ်မှတ်သည်ကို ရှာဖွေလေ့လာပါ။",
                            "ကုန်ပစ္စည်း အမြန်ရောင်းထွက်စေရန် ပုံမှန်ဈေးနှုန်းထက် အနည်းငယ် လျှော့၍ ရောင်းပါ။",
                            "ပွဲတော်၊ရာသီ အချိန်ကာလ တွေကို သိရှိသင့်ပါသည်။ အဆိုပါ အချိန်တွင် ဈေးနှုန်းချ၍ ရောင်းချခြင်းသည် ပုံမှန်အချိန်တွင် ဈေးနှုန်းချ၍ ရောင်းချခြင်းထက် ပို၍ သင့်တော်ပါသည်။",
                            "သင့် ကုန်ပစ္စည်း မရောင်းထွက် မချင်း ဈေးနှုန်း ပြင်ဆင်ခြင်းကို ပြုလုပ်နိုင်ပါသည်။ အကယ်၍ ကုန်ပစ္စည်းက နှစ်ရက် သုံးရက် အထိ မရောင်းရပါက ဈေးချ၍ ရောင်းခြင်းကို စဉ်းစားသင့်သည်။",
                        ]
                    }
                } else {
                    return {
                        "title" : "Helpful tips:",
                        "child" : [
                            "Search the catalogue for similar items to see how other members price them.",
                            "Setting a price that's lower than our catalogue average will help you sell faster.",
                            "Keep seasonality in mind. A discount may help you sell items that do not fit the current season.",
                            "You can adjust the price of your item until it sells. If your item hasn't sold in 2-3 days, consider lowering the price.",
                        ]
                    }
                }
            },
        }
    }

</script>
<style>
    .page-help .van-nav-bar{
        background-color: #FF9900;
        color: #fff;
    }
    .page-help .van-nav-bar .van-icon{
        color: #fff;
        margin-right: 15px;
        font-size: 18px;
    }
    .page-help .van-list__loading{
        width: 100%;
        /*border-top: 1px solid #F2F2F2;*/
    }
    .terms p {
        margin: 0;
    }
</style>
<style scoped>
    .terms{
        width:92%;
        margin:0 auto;
        padding: 20px 0;
    }
    .terms .h1{
        text-align:left;
        font-size: 1.2em!important;
        padding: 0.5em 0;
        margin: 0;
    }
    .terms .h3{
        /*font-weight: bold;*/
        color: #000;
        padding: 0.5em 0;
        margin: 0;
    }
    .terms p{
        color: rgb(81, 81, 81);
    }
    .terms li{list-style-type: none}
    .terms-list{
        margin-bottom: 20px;
    }
    .ul-title{
        margin: 10px 0;
    }
    .terms li.ul-li{
        list-style-type: disc;
        margin-left: 10%;
    }
    .terms p .is-link{
        color: #0e6c9c;
    }
    .list-box{
        /*padding-left: 4%;*/
    }
    .list-box p{
        /*word-wrap : break-word ;*/
        /*word-break:break-all;*/
        margin-bottom: 15px;
        padding-left: 15px;
        position: relative;
    }
    .list-box p:before {
        content: '';
        position: absolute;
        top: 5px;
        left: 0px;
        width: 8px;
        height: 8px;
        /*margin-top: -4px;*/
        /*margin-left: -4px;*/
        background: #000000;
        border-radius: 50%;
    }
    table {
        border-collapse:collapse;
    }
    table, th, td {
        border: 1px solid #DEDEDE;
        font-size: 14px;
    }
    .table-box {
        width: 100%;
        margin-bottom: 15px;
    }
    .th-title th{
        font-weight: normal;
        color: #fff;
        background: #5362EF;
        padding: 15px 0;
        width: 50%;
    }
    .th-list td{
        text-align: center;
        width: 50%;
        padding: 6px 2px;
    }
</style>
